<template>
  <div class="add-container">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 步骤条 -->
      <el-steps :active="Number(tabVlaue)" finish-status="success" :space="200">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 标签页 -->
      <el-tabs
        tab-position="left"
        style="height: 200px;margin-top:20px"
        v-model="tabVlaue"
        :before-leave="changeTab"
        >--{{ tabVlaue }}
        <el-tab-pane label="基本信息" name="1">
          <el-form ref="form" :model="form">
           <el-form-item label="商品分类" label-width="120px">
             <!-- 级联选择器 -->
             <el-cascader
              v-model="value"
              :options="options"
              :props="{ value:'cat_id',label:'cat_name' }"
              @change="handleChange(value)"
            ></el-cascader>---{{value}}
           </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="2">商品参数</el-tab-pane>
        <el-tab-pane label="商品属性" name="3">商品属性</el-tab-pane>
        <el-tab-pane label="商品图片" name="4">商品图片</el-tab-pane>
        <el-tab-pane label="商品内容" name="5">商品内容</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { getCateList, getParams } from '@/api/login.js'
export default {
  name: 'Add',
  data () {
    return {
      active: 1,
      // 标签页选中的值
      tabVlaue: '1',
      // 级联选择器选中的数据
      value: [],
      options: [],
      // 表单数据
      form: {

      },
      // 商品参数
      paramsObj: '',
      // 静态属性数组
      attrs: []
    }
  },
  created () {
    this.loadCateList()
  },
  methods: {
    // 获取商品分类列表数据
    async loadCateList () {
      const res = await getCateList()
      console.log(res)
      // 保存分类列表数据
      this.options = res.data.data
    },
    // 改变标签的时候触发
    handleChange (value) {
      console.log(value)
      // 如果选中不是三级分类
      if (this.value.length !== 3) {
        // 清空数组
        this.value = []
        // 弹出警告
        this.$message.warning('只能选择三级分类')
      }
    },
    // 切换标签
    changeTab (activeName) {
      console.log(Number(activeName))
      // 如果当前选中的是第一个标签页
      if (activeName !== '1') {
        if (this.value.length !== 3) {
          this.$message.error('请先选择商品分类')
          return false
        }
      }
      if (activeName === '2') {
        this.paramsObj = 'many'
        console.log(this.paramsObj)
        this.getManyData()
      }
      if (activeName === '3') {
        this.paramsObj = 'only'
        console.log(this.paramsObj)
        this.getManyData()
      }
      return true
    },
    // 获取动态属性
    async getManyData () {
      // 获取动态属性
      if (this.paramsObj === 'many') {
        const res = await getParams({ id: this.value[this.value.length - 1], sel: this.paramsObj })
        console.log(res)
        // 合并动态属性
        this.attrs = [...this.attrs, ...res.data.data]
      }
      // 获取静态参数
      if (this.paramsObj === 'only') {
        const res = await getParams({ id: this.value[this.value.length - 1], sel: this.paramsObj })
        console.log(res)
        this.attrs = [...this.attrs, ...res.data.data]
      }
    }
  }
}
</script>
<style lang="less">
.el-steps {
  padding: 0 40px;
  // .step-body {
  //   display: flex;
  // }
}
</style>
